<template>
	<view>
		<view class="u-page" v-if="userInfo">
			<view class="name-card" >
				<view class="avatar" v-if="userInfo.icon">
					<image :src="getFmtImage(userInfo.icon)" mode="aspectFill"></image>
				</view>
				<view class="avatar" v-else>
					<textIcon :lwtext="userInfo.userName"></textIcon>
				</view>
				<view class="detail">
					<view class="len1">
						<view class="name">{{userInfo.userName}}</view>
						<view class="age" v-if="userInfo.age">{{userInfo.age}}岁</view>
					</view>
					<view class="len-infos">
						<view class="len">
							<view class="k">部门：</view>
							<view class="v">{{userInfo.dept}}</view>
						</view>
						<view class="len">
							<view class="k">职务：</view>
							<view class="v">{{userInfo.post}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="menus" v-if="globalConfig.personalMenus">
				<u-cell-group>
					<u-cell size="large" 
						v-for="(item, index) in globalConfig.personalMenus" :key="index"
						:icon="getFmtImage(item.icon)"
						 :title="item.title" :isLink="item.isLink" @click="__handleExtButtonClick(item)"></u-cell>
				</u-cell-group>
			</view>

			<view class="logoutWrapper">
				<u-button type="warning" text="退出登录" @click="dislogin()"></u-button>
			</view>
		</view>
		<mytabbar></mytabbar>
	</view>
</template>
<script>
	import mytabbar from '@/components/tabbar/index.vue' 
	import textIcon from '@/components/textIcon/index.vue';
	import sceneMixins from "@/utils/sceneMixins";
	import {mapState, mapMutations} from 'vuex';
	export default {
		components: {mytabbar: mytabbar, textIcon},
		options: { styleIsolation: 'shared' },
		mixins: [sceneMixins],
		data() {
			return {
			}
		},
		computed: {
			...mapState(['userInfo', 'globalConfig'])
		},
		onLoad() {
			var vm = this;
			uni.showLoading();
			vm.doWxLogin().then(res => {
				uni.hideLoading();
				vm.openId = res.openId;
				vm.$jg.judge('login');
			});
		},
		methods: {
			...mapMutations(['doLogout', 'setMenuConfigs']),
			goToTxl: function () {
				uni.navigateTo({
					url: '/pages/contacts/index'
				});
			},
			dislogin: function () {
				var vm = this;
				uni.showModal({
					title: "提示",
					content: "是否确认退出登录。",
					showCancel: true,
					success: function (res3) {
						if (res3.confirm) {
							uni.showLoading();
							vm.getAndLoad("微信解绑", "/mobile/wx/newApi/wx/removeOpenId.jsp?openId=" + vm.openId + '&userId=' + vm.userInfo.userId,
								function (res) {
									if (res.code != 0) {
										uni.$u.toast(res.msg || "操作失败");
									}
									vm.doLogout();
									uni.setStorageSync('spaceConfig', '');
                                    vm.setMenuConfigs('');
									uni.reLaunch({
										url: "/pages/index/index",
									});
								}								
							);
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.name-card {
		color: #fff;
		background: linear-gradient(0, $lw_primary_color_light, $lw_primary_color);
		display: flex;
		align-items: center;
		padding: calc(60rpx + var(--status-bar-height) + 44px + env(safe-area-inset-top)) 60rpx 60rpx;
		.avatar /deep/ {
			image {
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
				border: 6rpx solid #c1def6;
			}
		}
		.detail {
			margin-left: 18rpx;
			.len1 {
				display: flex;
				align-items: baseline;
				line-height: 72rpx;
				margin-top: -25rpx;
				.name {
					font-size: 36rpx;
					margin-right: 20rpx;
				}
				.age {
					font-size: 26rpx;
				}
			}
			.len-infos {
				.len {
					display: flex;
					font-size: 28rpx;
					line-height: 42rpx;
					.k {
						margin-right: 8rpx;
					}
				}
			}
		}
	}
	.menus {
		background: #fff;
		/deep/ .u-cell__title-text {
			margin-left: 20rpx;
		}
	}
	.logoutWrapper {
		margin: 80rpx 40rpx;
	}
</style>
